import { useEffect, useRef } from 'react';
import * as echarts from 'echarts';

function Echar_shan() {

    const chartRef = useRef(null);

    useEffect(() => {
        // 初始化 ECharts 实例
        const myChart = echarts.init(chartRef.current);

        // 设置图表的配置项
        const option = {
            tooltip: {
                trigger: 'item',
                formatter: '{a} <br/>{b} : {c} ({d}%)'
            },
            legend: {
                orient: 'vertical',
                left: 'left',
                data: ['深睡', '浅睡', '清醒']
            },
            series: [
                {
                    name: '睡眠时间',
                    type: 'pie',
                    radius: '50%',
                    data: [
                        { value: 408, name: '深睡' },
                        { value: 52, name: '浅睡' },
                        { value: 40, name: '清醒' },
                    ],
                    emphasis: {
                        itemStyle: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };

        // 将配置项应用到图表
        myChart.setOption(option);

        // 在组件卸载时销毁图表实例
        return () => {
            myChart.dispose();
        };
    }, []);

    return (
        <div style={{ width: '90%' }} >
            <div
                ref={chartRef}
                style={{ minHeight: '6rem' }}></div>
        </div>
    );
}

export default Echar_shan;